<template>
  <div class="register">
    <div class="phone">
      <input type="text" v-model="phone" placeholder="输入手机号" />
    </div>
    <div class="username">
      <input type="text" v-model="username" placeholder="输入用户名" />
    </div>
    <div class="regBtn">
      <button @click="reg">注册</button>
    </div>
    <div class="footer">
      <span @click="golog">去登录</span>
    </div>
  </div>
</template>
<script>
import { regApi } from "../../apis/loginApi";
export default {
  data() {
    return {
      phone: "",
      username: "",
    };
  },
  methods: {
    reg() {
      if (/^1[3-9][0-9]{9}/g.test(this.phone)) {
        if (this.username.length > 4 && this.username.length < 9) {
          regApi({
            phone: this.phone,
            name: this.username,
          }).then((data) => {
            if (data.code === 200) {
              this.$toast({
                message: "注册成功",
                position: "bottom",
              });
              (this.phone = ""), (this.username = "");
            } else {
              this.$toast.fail("验证码不正确");
            }
          });
        } else {
          this.$toast.fail("用户名为5至8位");
        }
      } else {
        //手机号正则错误
        this.$toast.fail("请输入正确手机号");
      }
    },
    golog() {
      this.$router.push({ path: "/login", query: { s: true } });
    },
  },
};
</script>



<style lang="less" scoped>
.register {
  width: 100%;
  height: 100%;
  background: url("../../images/loginback.jpeg") center center / 100% 100%
    no-repeat;
  padding: 5rem 30px;

  > .phone {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid rgb(201, 205, 209);
    display: flex;
    margin-bottom: 40px;
    input {
      border: none;
      outline: none;
      font-size: 0.9rem;
      width: 8rem;
      background-color: transparent;
      flex: 1;
    }
    span {
      font-size: 0.9rem;
      display: block;
      border-left: 1px solid rgb(165, 159, 159);
      padding-left: 10px;
      height: 1.1rem;
      color: red;
    }
  }
  > .username {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid rgb(201, 205, 209);
    margin-bottom: 40px;
    input {
      border: none;
      outline: none;
      font-size: 0.9rem;
      width: 8rem;
      background-color: transparent;
      flex: 1;
    }
  }
  > .regBtn {
    button {
      width: 100%;
      height: 2.5rem;
      border-radius: 0.5rem;
      border: none;
      background-color: rgb(255, 187, 0);
      color: rgb(255, 255, 255);
    }
  }
  > .footer {
    margin-top: 30px;
    > span {
      font-size: 0.8rem;
      color: red;
      float: right;
    }
  }
}
</style>